import React, {useState} from 'react';
import {ProColumns} from '@ant-design/pro-table';
import {TableConfig} from './data.d';
import {modulesUrl} from "@/assets/constant/modulesUrl";
import {hooksSet} from "@/assets/utils/utils";
import TableList from "@/assets/components/tableList";
import {Form} from "antd";

const TableConfigList: React.FC<{}> = () => {
  const [form] = Form.useForm();

  /**
   * 字段列表
   */
  const [columns, setColumns] = useState<ProColumns<TableConfig>[]>([
    {
      title: '名称',
      dataIndex: 'name',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '名称为必填项',
          },
        ],
      },
    },
    {
      title: '数据源',
      dataIndex: 'source.id',
      hideInSearch: true,
      valueType: "select",
      renderText: (_, record) => record.source && record.source.name,
      formItemProps: {
        rules: [
          {
            required: true,
            message: '数据源为必填项',
          },
        ],
      },
    },
    {
      title: '表名',
      dataIndex: 'tableName',
      hideInSearch: true,
      valueType: "select",
      formItemProps: {
        rules: [
          {
            required: true,
            message: '类型为必填项',
          },
        ],
      },
    },
    {
      title: '字段隐藏',
      dataIndex: 'columnNotShowList',
      hideInSearch: true,
      hideInTable: true,
      // @ts-ignore
      valueType: "selectMultiple",
    },
  ]);

  return (
    <TableList
      title={"表配置管理"}
      moduleUrl={modulesUrl.reportTableConfig}
      changeColumns={(columns: any) => hooksSet(setColumns, columns)}
      isNotUseModalForm={true}
      columns={columns}
      form={form}
    />
  );
};

export default TableConfigList;
